<template>
  <el-container
    v-if="showMain"
    style="padding:0px;position:absolute;right:15%;left:15%;width: 70%;height: 100%;background-color:#ffffff;"
  >
    <el-main style="padding:0px;padding-right:20px;">
      <span
        style="font-size:25px; font-weight:bold; color:black;"
        :underline="false"
      >{{question.title}}
        <b style="float:right;">
          <el-tag v-if=question.hasBestAnswer>存在优解</el-tag>
          <el-tag
            v-else
            type="danger"
          >暂无优解</el-tag>
        </b>
      </span>
      <div style="padding-top:5px;">
        <el-tag
          effect="dark"
          type="success"
        >提问者</el-tag> {{question.replies[0].user.username}} --- {{question.replies[0].replyTime  | ellipsis}}
      </div>
      <p>{{question.replies[0].replyContent}}
        <el-image
          v-show="question.replies[0].url !== ''"
          style="display: block;margin: auto;width: 80%;padding-top:10px;"
          :src="question.replies[0].url"
          :preview-src-list="[question.replies[0].url]"
          fit="scale-down"
        ></el-image>
      </p>
      <span>
        <el-button
          type="text"
          class="el-icon-chat-dot-round"
          style="font-size:16px; color:gray;"
          v-if="!dialogVisible2"
          @click="dialogVisible2 = true"
        > 评论</el-button>
        <el-button
          type="text"
          class="el-icon-chat-dot-round"
          style="font-size:16px; color:gray;"
          v-else
          @click="dialogVisible2 = false"
        > 收起评论</el-button>
        <el-button
          type="text"
          class="el-icon-s-promotion"
          style="font-size:16px; color:gray;"
        > 分享</el-button>
        <el-button
          type="text"
          class="el-icon-star-on"
          style="font-size:16px; color:red;"
        > 收藏</el-button>
        <el-popconfirm
          title="确定不保留这道题供他人参考吗？"
          icon="el-icon-info"
          iconColor="red"
          style="float:right;"
          @onConfirm="del2(question.threadId)"
          v-if="question.replies[0].user.username === username"
        >
          <el-button
            type="text"
            class="el-icon-delete"
            slot="reference"
            style="font-size:16px;color:red;"
          > 删除</el-button>
        </el-popconfirm>
      </span>
      <el-card
        shadow="never"
        style="margin-right:10px;"
        :body-style="{ padding: '5px' }"
        v-if="dialogVisible2"
      >
        <div slot="header">
          <span style="font-size:20px; font-weight:bold;">评论</span>
          <el-button
            style="float:right;"
            type="primary"
            icon="el-icon-edit"
            size="small"
            @click="dialogVisible = true"
          ></el-button>
        </div>
        <el-card
          :body-style="{ padding: '8px' }"
          shadow="always"
          v-for="(item) in question.replies.slice(1)"
          :key="item.replyId+''"
          style="padding-bottom:5px;"
        >
          <div slot="header">
            <div>{{item.user.username}} --- {{item.replyTime | ellipsis}}</div>
            <div>
              <p>{{item.replyContent}}</p>
              <el-image
                v-show="item.url !== ''"
                style="display: block;margin: auto;width: 80%;"
                :src="item.url"
                :preview-src-list="[item.url]"
                fit="scale-down"
              ></el-image>
            </div>
          </div>
          <span>
            <!-- <el-button
              type="text"
              class="el-icon-delete"
              style="font-size:16px;color:gray;"
            > 删除</el-button>
            <el-button
              type="text"
              class="el-icon-delete"
              style="font-size:16px;color:gray;"
            > 删除</el-button> -->
            <span
              style="float:right;"
              v-if="item.user.username === username"
            >
              <el-button
                type="text"
                class="el-icon-edit"
                style="font-size:16px;color:blue;"
                @click="showchan(item.replyId)"
              > 更改</el-button>
              <el-popconfirm
                title="确定删除该条评论吗？"
                icon="el-icon-info"
                iconColor="red"
                style="margin-left:10px;"
                @onConfirm="del(item.replyId)"
              >
                <el-button
                  type="text"
                  class="el-icon-delete"
                  slot="reference"
                  style="font-size:16px;color:red;"
                > 删除</el-button>
              </el-popconfirm>
            </span>
          </span>
          <el-dialog
            title="更改"
            :visible.sync="dialogVisible3"
            width="40%"
            center
          >
            <el-input
              type="textarea"
              :rows="5"
              placeholder="请输入内容"
              v-model="detailedcontent"
              style="font-size:16px;"
            >
            </el-input>
            <el-input
              type="url"
              autocomplete="off"
              size="mini"
              v-model="url"
              :clearable="true"
              style="width:350px;margin-top:25px;font-size:16px;"
            ><template slot="prepend">
                <el-button @click="open">图片Url:</el-button>
              </template></el-input>
            <span
              slot="footer"
              class="dialog-footer"
            >
              <el-button @click="dialogVisible3 = false">取 消</el-button>
              <el-button
                type="primary"
                @click="upd(replyId)"
              >更 改</el-button>
            </span>
          </el-dialog>
        </el-card>
      </el-card>
      <el-dialog
        title="评论"
        :visible.sync="dialogVisible"
        width="40%"
        center
      >
        <el-input
          type="textarea"
          :rows="5"
          placeholder="请输入内容"
          v-model="detailedcontent"
          style="font-size:16px;"
        >
        </el-input>
        <el-input
          type="url"
          autocomplete="off"
          size="mini"
          v-model="url"
          :clearable="true"
          style="width:350px;margin-top:25px;font-size:16px;"
        ><template slot="prepend">
            <el-button @click="open">图片Url:</el-button>
          </template></el-input>
        <span
          slot="footer"
          class="dialog-footer"
        >
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button
            type="primary"
            @click="upload"
          >上 传</el-button>
        </span>
      </el-dialog>
    </el-main>
    <el-aside style="padding-left:5px;border-left: 1px solid #e1e2e5;">
      <Hotquestion></Hotquestion>
    </el-aside>
  </el-container>
</template>

<script>
import { request } from 'network/request'
import Hotquestion from 'components/content/question/Hotquestion'
export default {
  name: 'answersheet',
  data () {
    return {
      showMain: false,
      username: sessionStorage.getItem('username'),
      replyId: 0,
      url: '',
      detailedcontent: '',
      reply: {
        replyContent: ''
      },
      dialogVisible: false,
      dialogVisible2: false,
      dialogVisible3: false,
      question: {
        replies: []
      }
    }
  },
  components: {
    Hotquestion
  },
  mounted () {
    this.tid = JSON.parse(this.$route.query.id)
    // console.log(JSON.parse(this.$route.query.id));
    request({
      url: '/thread/' + this.tid,
      method: 'get'
    }).then((res) => {
      // console.log(res.data);
      this.question = res.data.thread
      this.question.replies.forEach((res) => {
        this.$set(res, 'url', res.replyContent.substring(res.replyContent.lastIndexOf('@#@') + 3))
        res.replyContent = res.replyContent.substring(0, res.replyContent.lastIndexOf('@#@'))
      })
      this.showMain = true
      // console.log(this.question);
    })
  },
  methods: {
    showchan (replyId) {
      this.dialogVisible3 = true
      this.replyId = replyId
    },
    upd (replyId) {
      if (this.detailedcontent === '' && this.url === '') {
        this.$message({
          message: '评论不能为空',
          type: 'error',
          duration: 3000
        })
        return
      }
      this.reply.replyContent = this.detailedcontent + '@#@' + this.url
      request({
        url: '/reply/' + replyId,
        method: 'put',
        data: this.reply
      }).then(res => {
        console.log(res)
        this.$message({
          message: '更改成功',
          type: 'success',
          duration: 1500
        })
      }).catch(err => {
        if (err) {
          this.$message({
            message: '更改失败',
            type: 'error',
            duration: 1500
          })
        }
      })
      setTimeout(() => {
        window.location.reload()
      }, 1500)
    },
    del (replyId) {
      request({
        url: '/reply/' + replyId,
        method: 'delete'
      }).then(res => {
        // console.log(res.status);
        this.$message({
          message: '删除成功',
          type: 'success',
          duration: 1500
        })
      }).catch(err => {
        if (err) {
          this.$message({
            message: '删除失败',
            type: 'error',
            duration: 1500
          })
        }
      })
      setTimeout(() => {
        window.location.reload()
      }, 1500)
    },
    del2 (threadId) {
      request({
        url: '/thread/' + threadId,
        method: 'delete'
      }).then(res => {
        // console.log(res.status);
        this.$message({
          message: '删除成功',
          type: 'success',
          duration: 1500
        })
      }).catch(err => {
        if (err) {
          this.$message({
            message: '删除失败',
            type: 'error',
            duration: 1500
          })
        }
      })
      setTimeout(() => {
        this.$router.push('/')
      }, 1500)
    },
    upload () {
      try {
        if (this.detailedcontent === '' && this.url === '') {
          this.$message({
            message: '评论不能为空',
            type: 'error',
            duration: 3000
          })
          return
        }
        this.reply.replyContent = this.detailedcontent + '@#@' + this.url
        this.tid = JSON.parse(this.$route.query.id)
        request({
          url: '/thread/' + this.tid + '/reply',
          method: 'post',
          data: this.reply
        }).then(res => {
          // console.log(res.status);
          this.$message({
            message: '上传成功',
            type: 'success',
            duration: 1500
          })
        }).catch(err => {
          if (err) {
            this.$message({
              message: '上传失败',
              type: 'error',
              duration: 1500
            })
          }
        })
        setTimeout(() => {
          window.location.reload()
        }, 1500)
      } catch (error) {
        console.log(error)
        this.$message({
          message: error,
          type: 'error',
          duration: 1500
        })
      }
    },
    open () {
      this.$notify({
        title: '关于图片上传',
        dangerouslyUseHTMLString: true,
        message:
          '<strong>需要您先将图片上传至<a href="https://sm.ms/" target="_blank">https://sm.ms/</a>，然后将获得的图片url地址填入下面的图片Url框中</strong>'
      })
    }
  },
  filters: {
    ellipsis (value) {
      return value.slice(0, 10) + ' ' + value.slice(11, 19)
    }
  }
}
</script>

<style lang='less' scoped>
</style>
